<template>
  请输入文章的标题：<input v-model="articlelistinfo.title" class="titletext" type="text">
  <div class="mce">
    <QuillEditor
      v-model:content="articlelistinfo.content"
      theme="snow"
      content-type="text"
    />
  </div>
  <select name="type" class="articletype" @change="selectClass($event)">
    <option value="">请选择文章类型</option>
    <option value="动漫">动漫</option>
    <option value="游戏">游戏</option>
    <option value="杂谈">杂谈</option>
  </select>
  <!-- <Upload class="uploadimg" /> -->
  <!-- <el-upload
    ref="upload"
    class="upload-demo"
    action=""
    :on-change="addImg"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    list-type="file"
  >
    <el-button type="primary">Click to upload</el-button>
  </el-upload> -->
  <div>
    <input
      ref="inputer"
      type="file"
      accept="image/png,image/jpeg,image/gif,image/jpg"
      @change="addImg"
    >
  </div>

  <div class="addBtnContainer">
    <div class="addBtn" @click="addArticlelist()">发布</div>
    <div class="cancelBtn">取消</div>
  </div>
</template>

<script>
import Upload from '../components/upload.vue'
import { ElButton } from 'element-plus'
import { ElUpload } from 'element-plus'

export default {
  // eslint-disable-next-line vue/no-unused-components
  components:{  Upload, ElButton, ElUpload },
  data() {
    return {
      articlelistinfo: {
        title: '',
        content: '',
        type:'',
        img: ''
      },
      disabled:false
    }
  },
  methods: {
    selectClass(event) {
      this.articlelistinfo.type = event.target.value
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    changeResult(file) {
      this.articlelistinfo.img = file
    },
    async addImg(){
      const inputDOM = this.$refs.inputer
      // 通过DOM取文件数据
      const files = inputDOM.files
      console.log(files, '-----fiels')
      const file = files[0]
      console.log(file, '-------file')
      this.articlelistinfo.img = file
    },
    async addArticlelist() {
      const formData = new FormData()
      formData.append('title', this.articlelistinfo.title)
      formData.append('type', this.articlelistinfo.type)
      formData.append('content', this.articlelistinfo.content)
      formData.append('img', this.articlelistinfo.img)
      const res = await this.$api.addartcle.addArticle(formData)
      console.log(this.articlelistinfo, '-------articlelistinfo')
      if(res.data.status === 0) {
        this.$router.push({ path:'/self' })
        alert('发布文章成功!')
      }else {
        alert(res.data.message)
      }
      console.log(res,'-------res')
      console.log(this.articlelistinfo.type)
    }
  }
}
</script>

<style lang="scss" scoped>

.titletext {
  margin-top: 20px;
  margin-bottom: 50px;
}

.mce {
  width: 1000px;
  height: 500px;
  margin-bottom: 50px;
}

.articletype {
  margin-bottom: 20px;
}
.uploadimg {
  margin-left: 200px;
  margin-bottom: 20px;
}
.addBtnContainer {
  display: flex;
  margin-left: 800px;
  text-align: center;
  .addBtn {
    width: 50px;
    height: 25px;
    margin-right: 10px;
    background-color: #2196F3;
  }
  .cancelBtn {
    width: 50px;
    height: 25px;
    background-color: red;
  }
}
</style>
